<template>
  <div class="lineInfo">
    <div style="height: 39px">
      <div class="lineardown el-icon-sunny"> 信息统计</div>
      <p class="slopingside"> </p>
      <div class="linearup">
        <el-button type="text" class="download el-icon-download">导出</el-button>
      </div>
    </div>
    <div class="infoSys">
      <div class="totalTrain">
        <div class="infoTrainName el-icon-truck">
            总车辆
        </div>
        <div class="infoTrainNumber">
          {{trainInfo.totalTrain}}
        </div>
      </div>
      <div class="traingraph">
        <div v-for="(item,index) in trainInfo.traingraph">
          <br>
          <div class="name-view">
            <span class="status-info" :style="{'background-color': item.color}"></span>
            <span class="traingraph-name">{{item.name}}</span>
          </div>
          <el-progress :stroke-width="8"
                       :percentage="setItemProgress(item.value)"
                       v-if="!isNaN(parseInt((item.value/trainInfo.totalTrain)*100))"
                       color="#1B5DB9"
                       :format="p => {return item.value;}"
                       class="item-view"
                       ></el-progress>
          <br>
        </div>
      </div>
      <div class="train-statistic">
          <div class="mileage">
            <div class="infoTrainName el-icon-position">
              运行里程（百万）
            </div>
            <div class="infoTrainNumber">
              {{trainInfo.mileage}}
            </div>
          </div>
          <div class="energy">
            <div class="infoTrainName el-icon-data-analysis">
              能耗统计（百度）
            </div>
            <div class="infoTrainNumber">
              {{trainInfo.energy}}
            </div>
          </div>
      </div>
      <div style="height: 39px">
        <div class="lineardown el-icon-sunny"> 当前故障报警 </div>
        <p class="slopingside"> </p>
        <div class="linearup"> </div>
      </div>
      <div class="fault">
        <div v-for="(item,key,index) in trainFault" class="fault-div" :style="{ 'margin-right': index< Object.keys(trainFault).length - 1? '17px' : '0px'}">
          <div class="infoTrainName el-icon-message-solid">
            {{item.name}}
          </div>
          <div class="infoTrainNumber">
            {{item.value}}
          </div>
        </div>
      </div>
      <div>
        <el-table :data="faultDataPage" style="width: 100%">
          <el-table-column
              v-for="col in cols"
              :prop="col.prop"
              :label="col.label"
              :width="col.width"
              show-overflow-tooltip >
                <template slot-scope="scope">
                  <a style="color: #FFFFFF" rel="external nofollow" @click="toFaultInfo(scope.row.train,scope.row.code)">
                    <span v-if="col.prop == 'level'">
                       <span v-if=" scope.row.level==='轻微'" class="my-fault-minor">{{scope.row.level}}</span>
                       <span v-if=" scope.row.level==='严重'" class="my-fault-major">{{scope.row.level}}</span>
                       <span v-if=" scope.row.level==='中等'" class="my-fault-secondary">{{scope.row.level}}</span>
                    </span>
                      <span v-else>
                      {{scope.row[col.prop]}}
                    </span>
                  </a>
                </template>
          </el-table-column>
        </el-table>
        <!-- 分页底部 -->
        <el-pagination
            background
            style="margin-top: 3px; float: right"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="faultData.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lineInfo",
  data() {
    return {
      trainInfo: {
        totalTrain: 0,
        mileage:0,
        energy:0,
        traingraph : {
          online:{name: "在线车辆", value:15, color:"#1BB934"},
          fault:{name: "故障车辆", value:3, color:"#F75B1C"},
          offline:{name: "离线车辆", value:3, color:"#5E8598"}
        }
      },
      trainFault : {
        major: {name:"严重故障",value:1, backgroundColor: '#EB2B33'},
        secondary: {name:"中等故障",value:5, backgroundColor: '#F7981C'},
        minor: {name:"轻微故障",value:2,  backgroundColor: '#F7DB1C'},
      },
      faultData : [],
      cols :[
        {prop: 'train', label: '车辆号', width:'80'},
        {prop: 'level', label: '故障等级', width:'72'},
        {prop: 'code', label: '故障代码', width:'70'},
        {prop: 'name', label: '故障名称', width:'150'},
        {prop: 'time', label: '故障发生时间', width:'125'},
        {prop: 'source', label: '故障来源', width:'115'},
      ],
      currentPage : 1,
      faultDataPage: [],
      pageSize: 6,
    }
  },
  computed:{
  },
  watch:{
    "$store.state.gMonitor.faultData.fault" (){
      this.trainFault.major.value = this.$store.state.gMonitor.faultData.major;
      this.trainFault.secondary.value = this.$store.state.gMonitor.faultData.secondary;
      this.trainFault.minor.value = this.$store.state.gMonitor.faultData.minor;
      this.faultData = this.$store.state.gMonitor.faultData.fault;
    },
    "$store.state.gMonitor.trainInfo" (){
      this.trainInfo.totalTrain = this.$store.state.gMonitor.trainInfo.totalTrain;
      this.trainInfo.mileage = this.$store.state.gMonitor.trainInfo.mileage;
      this.trainInfo.energy = this.$store.state.gMonitor.trainInfo.energy;
      this.trainInfo.traingraph.online.value = this.$store.state.gMonitor.trainInfo.onlineTrain;
      this.trainInfo.traingraph.offline.value = this.$store.state.gMonitor.trainInfo.offlineTrain;
      this.trainInfo.traingraph.fault.value = this.$store.state.gMonitor.trainInfo.faultTrain;
    },
    faultData: function (){
      this.handleCurrentChange(this.currentPage);
    },
  },
  methods: {
    setItemProgress(data) {
      if (data > this.trainInfo.totalTrain) {
        return 100;
      } else {
        return parseInt((data / this.trainInfo.totalTrain).toFixed(1) * 100);
      }
    },
    toFaultInfo: function(train,code){
      this.$router.push({
        path: '/FaultManage/FaultAlert',
        query: {
          train: train,
          code: code
        }
      })
    },
    scoreColorChoose(level) {
      console.log("11111",level);
      switch (level){
        case '严重':
          return this.trainFault.major.backgroundColor;
        case '中等':
          return this.trainFault.secondary.backgroundColor;
        case '轻微':
          return this.trainFault.minor.backgroundColor;
      }
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      let start = (currentPage - 1) * this.pageSize;
      this.faultDataPage = this.faultData.slice(start,start + this.pageSize);
    },
  }
}
</script>

<style>

/*表格表头样式*/
.lineInfo .el-table__header th.el-table__cell{
  height: 32px;
}
/*表格主体样式*/
.lineInfo .el-table__body td.el-table__cell{
  height: 40px;
}

/*表格主体每行高度*/
.lineInfo .el-table__row {
  height: 40px;
}

/*表头字体*/
.lineInfo .el-table__header th.el-table__cell .cell{
  font-size: 12px;
  font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 18px;
}
/*表内字体*/
.lineInfo .el-table__body td.el-table__cell .cell{
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
}


/*右方的顶线*/
.lineInfo .linearup {
  border-top: 2px solid #1991EB;
  width: 427px;
  margin-left: -8px;
}

/*中间的过度的斜线线*/
.lineInfo .slopingside {
  border-top: 2px solid #1991EB;
  height: 0px;
  width: 36px;
  float: left;
  margin-top: 21px;
  transform: rotate(125deg);
  -o-transform: rotate(125deg);
  -moz-transform: rotate(125deg);
  -webkit-transform: rotate(125deg);
}

/*左方的底线*/
.lineInfo .lineardown {
  border-bottom: 2px solid #1991EB;
  width: 155px;
  font-size: 16px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 22px;
  margin-right: -8px;
}

/*底线和顶线*/
.lineInfo .lineardown,
.lineInfo .linearup
{
  margin-bottom: 16px;
  margin-top: 7px;
  float:left;
  height:30px;
}

/*导出*/
.lineInfo .download
{
  margin-top: 6px;
  margin-right: 2px;
  float: right;
  color: #2EA2F8;
}

/*信息统计第一行元素*/
.lineInfo .infoSys{
  margin-top: 23px;
  width: 612px;
}
/*总车辆盒子*/
.lineInfo .totalTrain{
  width: 223px;
  height: 144px;
  background: #0F172D;
  border: 1px solid #242F4F;
  margin-bottom: 32px;
  margin-right: 29px;
  float: left;
}
/*框盒子（可复用）*/
.lineInfo .infoTrainName{
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
  margin-left: 38px;
  margin-top: 30px;
}
/*框内中文（可复用）*/
.lineInfo .infoTrainNumber{
  margin-top: 21px;
  margin-left: 35px;
}
/*框内数值（可复用）*/
.lineInfo .infoTrainNumber{
  height: 40px;
  font-size: 40px;
  font-family: DS-Digital-Bold, DS-Digital;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 40px;
}
/*进度条盒子*/
.lineInfo .traingraph{
  width: 358px;
  float: left;
}
/*进度条-文字盒子*/
.lineInfo .name-view{
  width: 92px;
  float: left;
}
/*进度条-条*/
.lineInfo .item-view{
  width: 266px;
  float: left;
}
/*进度条-条*/
.lineInfo .el-progress-bar__outer{
  background-color: #19213A;
}
/*进度条-条内文字*/
.lineInfo .el-progress__text{
  width: 11px;
  height: 20px;
  font-size: 20px;
  font-family: DS-Digital-Bold, DS-Digital;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 20px;
}
/*进度条-标记颜色*/
.lineInfo .status-info{
  width: 10px;
  height: 10px;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.5);
  float: left;
  margin-top: 5px;
}
/*进度条-文字*/
.lineInfo .traingraph-name{
  width: 56px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
  float: left;
  margin-right: 17px;
  margin-left: 9px;
}
/*运行里程和能耗统计的盒子*/
.lineInfo .train-statistic{
  width: 610px;
  height: 144px;
  float: left;
  margin-bottom: 43px;
}
/*运行里程的盒子*/
.lineInfo .mileage{
  width: 296px;
  height: 144px;
  background: #0F172D;
  border: 1px solid #242F4F;
  float: left;
  margin-right: 17px;
}
/*能耗统计的盒子*/
.lineInfo .energy{
  width: 296px;
  height: 144px;
  background: #0F172D;
  border: 1px solid #242F4F;
  float: left;
}
/*故障的盒子*/
.lineInfo .fault{
  width: 610px;
  height: 122px;
  float: left;
  margin-top: 2px;
  margin-bottom: 26px;
}
/*严重、中等、轻微故障的盒子*/
.lineInfo .fault-div,
.lineInfo .fault-div-last{
  width: 192px;
  height: 122px;
  background: #0F172D;
  border: 1px solid #242F4F;
  float: left;
}
/*严重、中等故障的盒子*/
.lineInfo .fault-div{
  margin-right: 17px;
}

.lineInfo .my-fault-minor ,
.lineInfo .my-fault-major,
.lineInfo .my-fault-secondary
{
  width: 32px;
  height: 16px;
  font-size: 10px;
  line-height: 15px;
  padding: 3px 6px;
  border-radius: 3px;
}

.lineInfo .my-fault-minor{
  color: #F7DB1C;
  background-color: rgba(247, 189, 28, 0.1);
  border:  1px solid rgba(247, 219, 28, 0.4);
}
.lineInfo .my-fault-secondary{
  color: #F7981C;
  background-color: rgba(247, 152, 28, 0.1);
  border: 1px solid rgba(247, 152, 28, 0.4);
}
.lineInfo .my-fault-major{
  color: #EB2B33;
  background-color: rgba(235, 43, 51, 0.1);
  border: 1px solid rgba(235, 43, 51, 0.45);
}

</style>
